<script setup>
import { ref, onMounted } from 'vue';
import { Folder, Document } from '@element-plus/icons-vue';

const pathArr = ref(["Baidu"]);
const fileList = ref([]);
const loading = ref(false);
//获取用户信息
async function getList(path = '/') {
    loading.value = true;
    let fl = await BaiduPan("list", path);
    fileList.value = fl.list;
    for (let f of fileList.value) {
        if (f.size > 1024 * 1024 * 1024) {
            f.size = (f.size / (1024 * 1024 * 1024)).toFixed(1) + 'G';
        } else if (f.size > 1024 * 1024) {
            f.size = (f.size / (1024 * 1024)).toFixed(1) + 'M';
        } else if (f.size > 1024) {
            f.size = (f.size / (1024)).toFixed(1) + 'K';
        }
    }
    loading.value = false;
    //console.log(fileList.value);
}
onMounted(getList);
//点击行
async function rowClick(e) {
    if (e.isdir) {
        pathArr.value.push(e.server_filename);
        pathClick(pathArr.value.length - 1);
    } else if (e.category == 1 || e.category == 2) { //视频/音频文件
        //缓存当前目录的文件列表
        localStorage.setItem("play_path", JSON.stringify(fileList.value));
        //打开播放器
        openPlayer(e.path);
    } else { //其它文件下载 

    }
}
//点击路径
function pathClick(index) {
    let ph = '/' + pathArr.value.slice(1, index + 1).join('/');
    pathArr.value = pathArr.value.slice(0, index + 1);
    getList(ph);
}
</script>

<template>
    <el-breadcrumb separator="/" style="height: 30px;margin-left: 10px">
        <el-breadcrumb-item v-for="(item, index) in pathArr" @click="pathClick(index)" :key="index"><a
                href="javascript:void()">{{ item }}</a></el-breadcrumb-item>
    </el-breadcrumb>
    <el-table v-loading="loading" :data="fileList" style="width: 100%;" @rowClick="rowClick">
        <el-table-column prop="date" width="80">
            <template #default="scope">
                <el-icon v-if="scope.row.isdir">
                    <Folder style="width: 1em; height: 1em;" />
                </el-icon>
                <el-icon v-else>
                    <Document style="width: 1em; height: 1em;" />
                </el-icon>
            </template>
        </el-table-column>
        <el-table-column prop="server_filename" label="名称">
            <template #default="{ row }">
                <a v-if="row.isdir">{{ row.server_filename }}</a>
                <span v-else>{{ row.server_filename }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="size" label="大小" width="80" />
    </el-table>
</template>
